import { Cartesian2, Cartesian3, Color, HorizontalOrigin, LabelStyle, VerticalOrigin } from 'cesium';
import { v4 as uuidv4 } from 'uuid';
import concentrationPoint from '@/assets/marks/concentration-monitor.png';

interface PointOptions {
  coordinate: string;
  value: string;
  id: string;
  type?: string;
}

export const useConcentrationPoint = () => {
  //绘制浓度点
  const drawConcentrationPoints = (option: PointOptions) => {
    const { coordinate, value, id } = option;
    const description = {
      moduleTitle: '浓度点',
      moduleId: id
    };
    const longitude = coordinate.split(',')[0];
    const latitude = coordinate.split(',')[1];
    const position = Cartesian3.fromDegrees(Number(longitude), Number(latitude), 0);
    return window.viewer.entities.add({
      position: position,
      id: `Point_${uuidv4()}`,
      label: {
        show: true,
        text: '浓度值:' + value,
        font: '14pt Source Han Sans CN', //字体样式
        fillColor: Color.fromCssColorString('#00ffff').withAlpha(0.5), //字体颜色
        backgroundColor: Color.fromCssColorString('#1b50a0').withAlpha(0.5), //背景颜色
        showBackground: true, //是否显示背景颜色
        style: LabelStyle.FILL, //label样式
        outlineWidth: 2,
        verticalOrigin: VerticalOrigin.CENTER, //垂直位置
        horizontalOrigin: HorizontalOrigin.CENTER, //水平位置
        pixelOffset: new Cartesian2(0, -30) //偏移        //偏移
      },
      billboard: {
        // 图像地址，URI或Canvas的属性
        image: concentrationPoint,
        // 设置颜色和透明度
        color: Color.WHITE.withAlpha(1),
        // 逆时针旋转
        rotation: 0,
        // 大小是否以米为单位
        sizeInMeters: false,
        // 相对于坐标的垂直位置
        verticalOrigin: VerticalOrigin.CENTER,
        // 相对于坐标的水平位置
        horizontalOrigin: HorizontalOrigin.CENTER,
        // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
        pixelOffset: new Cartesian2(0, 0),
        // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
        scale: 0.5,
        // 是否显示
        show: true
      },
      description: JSON.stringify(description)
    });
  };
  //绘制区域
  const drawArea = (option: PointOptions) => {
    const { coordinate, id, type } = option;
    return window.viewer.entities.add({
      id: id,
      polygon: {
        hierarchy: JSON.parse(coordinate),
        extrudedHeight: 0, // 多边体的高度（多边形拉伸高度）
        height: 10, // 多边形离地高度
        material: getColorByType(type),
        outlineColor: Color.RED,
        outlineWidth: 2
      },
      description: JSON.stringify({
        moduleTitle: '区域',
        moduleId: id
      })
    });
  };
  const getColorByType = (type: string) => {
    if (type === '2') {
      return Color.RED.withAlpha(0.5);
    } else if (type === '3') {
      return Color.fromCssColorString('#ff7673').withAlpha(0.5);
    } else {
      return Color.fromCssColorString('#f49b98').withAlpha(0.5);
    }
  };
  return {
    drawConcentrationPoints,
    drawArea
  };
};
